<template>
  <div v-if="visible" class="fullscreen-search">
    <div class="search-header">
      <h2>{{ title }}</h2>
      <button class="close-button" @click="handleCancel">×</button>
    </div>
    <div class="search-content">
      <!-- 搜索框部分 -->
      <div class="search-container">
        <div class="search-logo">
          <img v-if="props.type === 'baidu'" class="baidu-logo" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="baidu" />
          <span v-else class="google-logo" v-html="googleSvg"></span>
        </div>
        <a-input ref="searchInput" v-model:value="searchText" :placeholder="placeholder" @pressEnter="handleSearch" size="large" :autofocus="true" class="search-input">
          <template #suffix>
            <button v-if="searchText" class="clear-button" @click="clearSearch">×</button>
            <button class="search-button" @click="handleSearch">
              <span class="search-icon">
                <svg viewBox="0 0 24 24" width="36" height="36" stroke="currentColor" stroke-width="2" fill="none">
                  <circle cx="11" cy="11" r="8"></circle>
                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
              </span>
            </button>
          </template>
        </a-input>

        <!-- 搜索历史记录 -->
        <div v-if="searchHistory.length > 0" class="search-history">
          <div class="history-header">
            <span>搜索历史</span>
            <a @click="clearHistory" class="clear-history">清空</a>
          </div>
          <ul class="history-list">
            <li v-for="(item, index) in searchHistory" :key="index" @click="useHistoryItem(item)" class="history-item">
              <span class="history-icon">
                <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12 6 12 12 16 14"></polyline>
                </svg>
              </span>
              <span class="history-text">{{ item }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
import { useBookmarkStore } from '../stores/bookmark'

const store = useBookmarkStore()
const props = defineProps({
  visible: Boolean,
  type: String // 'baidu' 或 'google'
})

const emit = defineEmits(['update:visible', 'search'])

const searchText = ref('')
const title = computed(() => (props.type === 'baidu' ? '百度搜索' : '谷歌搜索'))
const placeholder = computed(() => `请输入要${props.type === 'baidu' ? '百度' : '谷歌'}搜索的内容`)

const searchInput = ref(null)

// 搜索历史记录
const searchHistory = ref([])

// 从本地存储加载搜索历史
const loadSearchHistory = () => {
  const historyKey = `search_history_${props.type}`
  const savedHistory = localStorage.getItem(historyKey)
  if (savedHistory) {
    searchHistory.value = JSON.parse(savedHistory)
  }
}

// 保存搜索历史到本地存储
const saveSearchHistory = () => {
  const historyKey = `search_history_${props.type}`
  localStorage.setItem(historyKey, JSON.stringify(searchHistory.value))
}

// 添加搜索词到历史记录
const addToHistory = (term) => {
  // 如果已存在，先移除
  const index = searchHistory.value.indexOf(term)
  if (index > -1) {
    searchHistory.value.splice(index, 1)
  }

  // 添加到开头
  searchHistory.value.unshift(term)

  // 限制历史记录数量为10条
  if (searchHistory.value.length > 10) {
    searchHistory.value = searchHistory.value.slice(0, 10)
  }

  saveSearchHistory()
}

// 使用历史记录项
const useHistoryItem = (term) => {
  searchText.value = term
  handleSearch()
}

// 清空历史记录
const clearHistory = () => {
  searchHistory.value = []
  saveSearchHistory()
}

// 清空搜索框
const clearSearch = () => {
  searchText.value = ''
  nextTick(() => {
    searchInput.value?.focus()
  })
}

// 谷歌 Logo SVG
const googleSvg = `<svg class="lnXdpd" height="92" viewBox="0 0 272 92" width="272" xmlns="http://www.w3.org/2000/svg"><path d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z" fill="#EA4335"></path><path d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z" fill="#FBBC05"></path><path d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z" fill="#4285F4"></path><path d="M225 3v65h-9.5V3h9.5z" fill="#34A853"></path><path d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z" fill="#EA4335"></path><path d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z" fill="#4285F4"></path></svg>`

// 处理聚焦
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      nextTick(() => {
        searchText.value = ''
        searchInput.value?.focus()
        // 加载搜索历史
        loadSearchHistory()
      })
    }
  }
)

const handleSearch = () => {
  if (!searchText.value.trim()) return

  // 添加到历史记录
  addToHistory(searchText.value.trim())

  const searchUrl = props.type === 'baidu' ? `https://www.baidu.com/s?wd=${encodeURIComponent(searchText.value)}` : `https://www.google.com/search?q=${encodeURIComponent(searchText.value)}`

  window.open(searchUrl, '_blank')
  handleCancel()
}

const handleCancel = () => {
  searchText.value = ''
  emit('update:visible', false)
  store.isSearchFocused = false
}

// 监听ESC键
const handleKeyDown = (e) => {
  if (e.key === 'Escape' && props.visible) {
    emit('update:visible', false)
    store.isSearchFocused = false
  }
}

onMounted(() => {
  window.addEventListener('keydown', handleKeyDown)
})

onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleKeyDown)
})
</script>

<style scoped>
.fullscreen-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.98);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}

.close-button:hover {
  color: #333;
}

.search-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 20px;
  margin-top: 10vh;
}

.search-container {
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.search-input {
  width: 100%;
  height: 60px;
  font-size: 18px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
}

.search-input:hover,
.search-input:focus {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.search-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.baidu-logo {
  margin-bottom: 50px;
}
.google-logo {
  margin-bottom: 30px;
}

/* 调整谷歌 Logo 的大小和位置 */
.google-logo svg {
  transform: scale(0.3);
  transform-origin: left center;
}

/* 搜索按钮样式 */
.search-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #344767;
  padding: 0 8px;
  transition: color 0.2s;
}

.search-button:hover {
  color: #40a9ff;
}

.search-icon {
  display: flex;
}

/* 清除按钮样式 */
.clear-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #999;
  margin-right: 4px;
  transition: color 0.2s;
}

.clear-button:hover {
  color: #666;
}

/* 搜索历史样式 */
.search-history {
  margin-top: 16px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 16px;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: #666;
  font-size: 14px;
}

.clear-history {
  color: #344767;
  cursor: pointer;
  font-size: 13px;
}

.clear-history:hover {
  color: #40a9ff;
  text-decoration: underline;
}

.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 6px;
  padding-left: 8px;
}

.history-item:hover {
  background-color: #f5f5f5;
}

.history-icon {
  color: #999;
  margin-right: 8px;
  display: flex;
}

.history-text {
  color: #333;
  font-size: 14px;
}
</style>
